<!-- 个人信息页面  -->
<template>
  <div>
    <div class="container">
      <header>
        <div class="avatar">
          <img :src="userinfo.avatar" alt="" />
        </div>
        <div class="nikename">
          <h6>{{ userinfo.nikename }}</h6>
        </div>
        <div class="settings">
          <i class="iconfont icon-shezhi"></i>
        </div>
        <footer>
          <div>
            <i class="iconfont icon-31huiyuan"></i>
            <span>会员中心</span>
            <div>
              <span> 查看更多 </span>
              <i class="iconfont icon-you1"></i>
            </div>
          </div>
        </footer>
      </header>
      <section>
        <nav>
          <div>
            <i class="iconfont icon-wodezhanghu"></i><br />
            <span>我的账户</span>
          </div>
          <div>
            <i class="iconfont icon-qiajuan"></i><br />
            <span>我的卡券</span>
          </div>
          <div>
            <i class="iconfont icon-24gl-cartFull2"></i><br />
            <span>购物车</span>
          </div>
          <div>
            <i class="iconfont icon-xiaoxi"></i><br />
            <span>消息</span>
          </div>
        </nav>
        <div class="myOrder">
          <h6>我的历史订单</h6>
          <div class="orderItem">
            <div
              class="item"
              v-for="(item, index) in userinfo.myOrder"
              :key="index"
              :class="{ mt20: index > 1 }"
            >
              <img :src="item.image" alt="" />
              <div class="desc">{{ item.name }}</div>
            </div>
            <div
              v-show="userinfo.myOrder.length % 2 == 1"
              class="item"
              style="opacity: 0"
            >
              <img alt="" />
              <div class="desc">ob</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: this.$store.state.userinfo,
    };
  },

  components: {},

  computed: {},

  methods: {},
  mounted() {
    if (!this.$store.state.isLogin) {
      this.$router.push("/login");
    }
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.container
  > header
    background-color:#009375
    display: flex;
    padding: 65px 0;
    border-radius: 10px;
    position :relative
    overflow :hidden
    margin: 0 2px;
    > .avatar
      width: 75px;
      height: 75px;
      overflow: hidden;
      border-radius: 50%;
      margin-right: 15px;
      margin-left: 30px;
      margin-bottom: 20px;
      > img
        display: block;
        width: 100%;
        height: 100%;
    > .nikename
      font-size: 26px;
      color:#fff;
      display: flex;
      margin-top:25px;
      > h6
        margin: 0;
    > .settings
      position: absolute;
      width: 30px;
      height: 0.77333rem;
      right: 20px;
      top: 20px;
      > i
        font-size: 26px;
        color: #fff;
    > footer
      width: 295px;
      position: absolute;
      height: 70px;
      bottom: 0px;
      left: 50%;
      margin-left: -147.5px;
      background: linear-gradient(to right, rgb(139, 145, 159), rgb(182, 187, 196))
      border-radius: 10px 10px 0 0;
      > div
        margin-top: 10px;
        display: flex;
        align-items: center
        > i
          color: #1f1a1f;
          font-size: 36px;
          margin-left: 15px;
          margin-right: 15px;
        span
          margin-right: 70px;
          font-size: 16px;
        > span
          font-width: bold
        > div
          > span
            margin-right: 0;
            font-size: 14px;
            color: #4b4949
          > i
            font-size: 20px;
            color: #4b4949
  > section
    > nav:first-of-type
      margin: 15px auto;
      width:88%;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center
      height: 100px;
      border-radius: 10px;
      > div
        text-align: center
        color:#5a5656
        font-weight:400
        > i
          font-size: 30px;
        > span
          font-size:14px;
    > .myOrder
      width: 88%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      padding: 20px 0;
      > h6
        margin: 0 25px 0 25px
        font-size:20px;
        font-weight:600;
        margin-bottom: 25px;
      > .orderItem
        display: flex;
        flex-wrap: wrap
        justify-content: space-evenly;
        > .item
          width: 125px;
          height: 100px;
          border-radius: 10px;
          overflow: hidden;
          position: relative
          > img
            width: 100%;
            height: 100%;
          > .desc
            position:absolute
            bottom: 0px;
            width: 100%;
            padding: 10px 0;
            text-indent: 10px;
            font-weight: bold;
            font-size: 16px;
            color: #fff;
            background-color: rgba(0,0,0,.3)
.mt20
  margin-top: 20px;
h6
  margin: 0
</style>
